<template>
  <div class="regulations">
    <HeaderTitle
      title="规章则制度"
      des="指定设备相关制度"
      :imgUrl="require('@/static/imgs/repository-reg.png')"
    >
    </HeaderTitle>
    <div class="content">
      <el-row :span="24">
        <el-col :xs="5" :sm="5" :md="5" class="ctg__tree">
          <div class="tree">
            <avue-tree
              :option="treeOption"
              :data="treeData"
              @node-click="nodeClick"
            >
              <span class="el-tree-node__label" slot-scope="{ node, data }">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="无数据权限"
                  placement="right-start"
                  v-if="data.isLock"
                >
                  <span>{{ node.label }} <i class="el-icon-lock"></i></span>
                </el-tooltip>
                <span v-if="!data.isLock">{{ node.label }}</span>
              </span>
            </avue-tree>
          </div>
        </el-col>
        <el-col :xs="19" :sm="19" :md="19" class="regulations__main">
          <el-card class="box-card btn-search">
            <div slot="header" class="clearfix">
              <div class="btn-box">
                <el-button type="info" icon="el-icon-refresh-left"></el-button>
                <el-button
                  type="primary"
                  icon="el-icon-circle-plus-outline"
                  @click="addFun"
                  >新增</el-button
                >
                <el-button
                  type="success"
                  icon="el-icon-edit"
                  :disabled="selectionList.length !== 1"
                  @click="handleUpdate(selectionList[0])"
                  >编辑</el-button
                >
                <el-button
                  type="danger"
                  icon="el-icon-circle-close"
                  :disabled="!selectionList.length"
                  @click="deletes('delMultil')"
                  >删除</el-button
                >
              </div>
              <div class="icon-box">
                <i class="el-icon-refresh" @click="refreshChange"></i>
                <i class="el-icon-setting" @click="columnShow"></i>
                <!--<i class="el-icon-search"></i>
                <i class="el-icon-goods"></i>
                <i class="icon-zuixiaohua" />-->
              </div>
            </div>
            <div class="tabelsearch">
              <el-form
                :inline="true"
                class="demo-form-inline"
                style="padding-top: 21px"
              >
                <el-form-item label="制度名称">
                  <el-input
                    placeholder="请输入制度名称"
                    v-model="searchForm.regulationName"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    @click="searchChange"
                    >查询</el-button
                  >
                  <el-button icon="el-icon-refresh-right" @click="resetBtn"
                    >重置</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
          </el-card>
          <div class="kno-table">
            <avue-crud
              ref="crud"
              :option="option"
              v-model="form"
              :page.sync="page"
              :table-loading="listLoading"
              @selection-change="selectionChange"
              :before-open="handleOpenBefore"
              :data="list"
              @on-load="getList"
              @search-change="searchChange"
              @refresh-change="refreshChange"
              @size-change="sizeChange"
              @current-change="currentChange"
              @row-save="create"
            >
              <template slot="header">
                <IconTitle class="selfTitle" title="制度列表" imgUrl="yunwei" />
              </template>
              <template slot="regulationNo" slot-scope="scope">
                <span class="regulationNo">
                  {{ scope.row.regulationNo }}
                </span>
              </template>
              <template slot="regulationName" slot-scope="scope">
                <el-tooltip
                  popper-class="table-toolTip"
                  effect="light"
                  :content="scope.row.regulationName"
                >
                  <span class="toolTip-ellipsis">
                    {{ scope.row.regulationName }}
                  </span>
                </el-tooltip>
              </template>
              <template slot="regulationCategoryName" slot-scope="scope">
                <el-tooltip
                  popper-class="table-toolTip"
                  effect="light"
                  :content="scope.row.regulationCategoryName"
                >
                  <span class="toolTip-ellipsis">
                    {{ scope.row.regulationCategoryName }}
                  </span>
                </el-tooltip>
              </template>
              <template slot="isTop" slot-scope="scope">
                {{ scope.row.isTop === "1" ? "是" : "否" }}
              </template>
              <template slot="description" slot-scope="scope">
                <el-tooltip
                  popper-class="table-toolTip"
                  effect="light"
                  :content="scope.row.description"
                >
                  <span class="toolTip-ellipsis">{{
                    scope.row.description
                  }}</span>
                </el-tooltip>
              </template>
              <template slot="menu" slot-scope="scope">
                <el-button
                  v-if="sys_user_del"
                  type="text"
                  size="small"
                  icon="el-icon-delete"
                  @click="deletes('', scope.row)"
                  >删除
                </el-button>
                <el-button
                  v-if="sys_user_edit"
                  type="text"
                  size="small"
                  icon="el-icon-edit"
                  @click="handleUpdate(scope.row, scope.index)"
                  >编辑
                </el-button>
                <el-button
                  type="text"
                  size="small"
                  icon="el-icon-view"
                  @click="handleView(scope.row, scope.index)"
                  >查看
                </el-button>
              </template>
            </avue-crud>
          </div>
        </el-col>
      </el-row>
      <el-dialog
        class="avue-dialog avue-dialog--top"
        title="规章制度"
        v-if="regulationDialogVisible"
        :visible.sync="regulationDialogVisible"
        width="50%"
      >
        <Info
          v-if="regulationDialogVisible"
          :regulationTreeData="regulationTreeData"
          :regulationId="regulationId"
          :isView="isView"
          @cancelFun="cancelFun"
          @sureFun="sureFun"
        ></Info>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  fetchList,
  fetchTree,
  addObj,
  putObj,
  delObj,
} from "@/api/ems/repository/emsregulations";
import { tableOption } from "@/const/crud/ems/repository/emsregulations";
import { mapGetters } from "vuex";
import IconTitle from "@/components/icon-title/index.vue";
import Info from "./info.vue";
import jQuery from "jquery";

import HeaderTitle from "../components/header-title/index";
export default {
  name: "emsregulation",
  components: {
    IconTitle,
    Info,
    HeaderTitle,
  },
  data() {
    return {
      selectionList: [],
      regulationId: null,
      isView: false,
      regulationDialogVisible: false,
      searchForm: {
        regulationName: null,
      },
      treeOption: {
        nodeKey: "id",
        addBtn: false,
        menu: false,
        defaultExpandAll: true,
        props: {
          label: "name",
          value: "id",
        },
      },
      regulationTreeData: [],
      treeData: [],
      option: tableOption,
      defaultProps: {
        label: "name",
        value: "id",
      },
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20, // 每页显示多少条,
        isAsc: false, // 是否倒序
      },
      list: [],
      listLoading: true,
      role: [],
      form: {},
    };
  },
  computed: {
    ...mapGetters(["permissions"]),
  },
  watch: {
    role() {
      this.form.role = this.role;
    },
  },
  created() {
    this.sys_user_add = this.permissions["sys_user_add"];
    this.sys_user_edit = this.permissions["sys_user_edit"];
    this.sys_user_del = this.permissions["sys_user_del"];
    this.init();
  },
  mounted() {
    this.initElement();
  },
  methods: {
    initElement() {
      var mediumb = document.createElement("b"); //思路一样引入中间元素
      jQuery(".avue-crud__tip").after(mediumb);
      jQuery(".selfTitle").after(jQuery(".avue-crud__tip"));
      jQuery(mediumb).after(jQuery(".selfTitle"));
      jQuery(mediumb).remove();
    },
    sureFun(data, regulationId) {
      if (regulationId) {
        putObj(data)
          .then(() => {
            this.getList(this.page);
            this.regulationDialogVisible = false;
            this.$notify.success("修改成功");
          })
          .catch(() => {
            loading();
          });
      } else {
        addObj(data)
          .then(() => {
            this.getList(this.page);
            this.regulationDialogVisible = false;
            this.$notify.success("创建成功");
          })
          .catch(() => {
            loading();
          });
      }
    },
    cancelFun() {
      this.regulationDialogVisible = false;
    },
    resetBtn() {
      this.searchForm.regulationName = null;
    },
    init() {
      fetchTree({ type: "ems_regulations" }).then((response) => {
        this.regulationTreeData = response.data.data;
        this.treeData = [
          {
            delFlag: "0",
            id: 1,
            name: "所有类型",
            parentId: -1,
            remark: "",
            type: "all",
            weight: "1",
            children: response.data.data,
          },
        ];
      });
    },
    nodeClick(data) {
      this.page.page = 1;
      this.getList(this.page, { regulationCategory: data.id });
    },
    getList(page, params) {
      this.listLoading = true;
      fetchList(
        Object.assign(
          {
            current: page.currentPage,
            size: page.pageSize,
            regulationCategory: null,
          },
          params,
          this.searchForm
        )
      ).then((response) => {
        this.list = response.data.data.records;
        this.page.total = response.data.data.total;
        this.listLoading = false;
      });
    },
    searchChange(param, done) {
      this.page.currentPage = 1;
      this.getList(this.page, this.searchForm);
    },
    columnShow() {
      this.$refs.crud.$refs.dialogColumn.columnBox = !0;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    currentChange(current) {
      this.page.currentPage = current;
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    refreshChange() {
      this.getList(this.page);
    },
    handleOpenBefore(show, type) {},
    addFun() {
      this.isView = false;
      this.regulationId = null;
      this.regulationDialogVisible = true;
    },
    handleUpdate(row, index) {
      this.isView = false;
      this.regulationId = row.id;
      this.regulationDialogVisible = true;
    },
    handleView(row, index) {
      this.isView = true;
      this.regulationId = row.id;
      this.regulationDialogVisible = true;
    },
    create(row, done, loading) {
      addObj(this.form)
        .then(() => {
          this.getList(this.page);
          done();
          this.$notify.success("创建成功");
        })
        .catch(() => {
          loading();
        });
    },
    deletes(isMulti, row) {
      let id = "";
      this.$confirm("此操作将永久删除该规章制度,是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        if (isMulti == "delMultil") {
          id = this.selectionList.map((item) => item.id).toString();
        } else {
          id = row.id;
        }
        delObj(id)
          .then(() => {
            this.getList(this.page);
            this.$notify.success("删除成功");
          })
          .catch(() => {
            this.$notify.error("删除失败");
          });
      });
    },
  },
};
</script>
<style lang="scss">
@import "@/styles/color.scss";
.regulations {
  height: 100%;
  .content {
    height: 100%;
    .ctg__tree {
      padding-right: 10px;
      height: 100%;
      .tree {
        background: #fff;
        height: 100%;
        border-radius: 4px;
        padding: 20px;
      }
    }
    .regulations__main {
      .el-tag--small {
        height: 32px;
      }
      .avue-crud {
        background: #fff;
        border-radius: 5px;
        padding: 20px;
        padding-top: 10px;
        margin-bottom: 10px;
        width: 100%;
      }
      .tabelsearch {
        .demo-form-inline {
          padding-top: 21px;
        }
      }
      .kno-table {
        height: 100%;
        // background: #fff;
        margin-top: 10px;
        height: 100%;
      }
    }
  }
  &__tree {
    padding-top: 3px;
    padding-right: 20px;
  }

  &__main {
    .el-card__body {
      padding-top: 0;
    }
  }
  .regulations__main {
    .regulationNo {
      color: $theme;
    }
  }
  .toolTip-ellipsis {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }
  .el-tooltip__popper {
    max-width: 200px;
  }
}
</style>

